<template>
  <div class="login">
    <!-- 登录表单 -->
    <section class="login-container">
      <!-- 标题 -->
      <h1 class="title">系统登录</h1>

      <!-- 表单 -->
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
        <!-- 账号 -->
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            prefix-icon="iconfont icon-username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <!-- 
          type="password"
          show-password
        -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-mima"
            autocomplete="off"
            @click.native="changeType"
            :type="isOpen ? 'text' : 'password'"
            :suffix-icon="
              isOpen ? 'iconfont icon-yanjing' : 'iconfont icon-yanjing'
            "
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handerSubmitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
// 引入接口层ajax函数
import { checkLogin } from "@/api/account";
// 导入工具类-local.js
import local from "@/utils/local";
export default {
  data() {
    return {
      loginForm: {
        account: "",
        password: "",
      },
      // 眼睛type
      isOpen: false,
      // 定义规则
      loginRules: {
        // 账号的规则
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "用户账号在2-16位数字之间",
            tirgger: "blur",
          },
        ],
        // 密码的规则
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "您的密码在5-16位数字之间",
            tirgger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    changeType(e) {
      // console.log(e);
      if (e.target.className.includes("icon-yanjing")) {
        this.isOpen = !this.isOpen;
      }
    },
    handerSubmitForm() {
      // console.log("aaa");
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // 发送登录数据
          let { code, role, token, menus } = await checkLogin(this.loginForm);
          if (code == 0) {
            local.set("t_k", token);
            local.set("role", role);
            local.set("menus", menus);
            console.log(this.loginForm.account);
            local.set("username", this.loginForm.account);
            console.log(code);
            this.$router.push("/");
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");
.login {
  height: @height;
  .flex-center;
  background: @background;
  .login-container {
    width: @loginContainerW;
    // 标题
    .title {
      color: @fontColorFFF;
      font-size: @fontSize-24;
      font-weight: bold;
      text-align: center;
      margin-bottom: @m-b-20;
    }
    // 表单
    .el-form {
      .el-form-item {
        /deep/ .el-input__inner {
          background: #2d3a4b;
          color: @fontColorFFF;
          font-size: @fontSize-18;
        }
        .el-button {
          width: 100%;
        }
      }
    }
  }
}
</style>
